<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TDesign Vue Next Starter</title>
  </head>
  <body>
    <div id="app">
        <div class="loader"></div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script language="javascript">
      if (window.location.host === 'tdesign.tencent.com') {
        const aegis = new Aegis({
          id: 'rDISNMyXgqWDFPyHMB', // 项目ID，即上报key
          reportAssetSpeed: true, // 静态资源测速
        });
      }
    </script>
  </body>

  <script>
    window.global = window;
  </script>
  <style>
      .loader {
          position: fixed;
          top: 50%;
          left: 50%;
          width: 40px;
          aspect-ratio: 0.577;
          overflow: hidden;
          clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
          animation: l19 2s infinite linear;
      }

      .loader::before {
          position: absolute;
          inset: -150%;
          content: "";
          background: repeating-conic-gradient(
                  from 30deg,
                  #ffabab 0 60deg,
                  #abe4ff 0 120deg,
                  #ff7373 0 180deg
          );
          animation: inherit;
          animation-direction: reverse;
      }

      @keyframes l19 {
          100% {
              transform: rotate(360deg);
          }
      }
  </style>
</html>
